<template>
	<view class="custom-nav-bar" :style="{ paddingTop: safeTop + 'px' }">
		<view class="nav-bar-left" @click="onLeftClick">
			<uni-icons :type="leftIcon" size="24"></uni-icons>
		</view>
		<view class="nav-bar-title" :style="{ color: titleColor }">
			<view class="user_pic"><image class="userimg" :src="user.nicPic" mode="scaleToFill"></image></view>

			<view class="user_name">{{ user.targetName }}</view>
		</view>
		<view class="nav-bar-right" @click="onRightClick">
			<uni-icons :type="rightIcon" size="24"></uni-icons>
			<view class="rightBtn" v-if="rightBtnShow">
				<view class="btn" @click="handleUserInfo">查看个人信息</view>
				<view class="btn" @click="handleDeleMsg">删除聊天记录</view>
			
			</view>
		</view>
			<view class="right-btn-mask" v-if="rightBtnShow"  @tap="rightBtnShow=false"></view>
	</view>
</template>

<script>
export default {
	name: 'customnavbar',
	props: {
		leftIcon: {
			type: String,
			default: 'left'
		},
		rightIcon: {
			type: String,
			default: 'more-filled'
		},
		titleColor: {
			type: String,
			default: '#000'
		},
		user: {
			type: Object,
			required: true,
			validator: (value) => {
				return value === null || typeof value === 'object';
			}
		}
	},
	data() {
		return {
			safeTop: 0,
			rightBtnShow:false
		};
	},
	mounted() {
		this.safeTop = this.$store.state.msg.systemInfo.safeArea.top;
	},
	methods: {
		onLeftClick() {
			this.$emit('leftClick');
			uni.navigateBack();
		},
		onRightClick() {
			this.rightBtnShow=true
			//this.$emit('rightClick');
		},
		handleUserInfo(){
			
			uni.navigateTo({
				url:`/pages/friend/friend?id=${this.user.targetId}`
			})
		},
		handleDeleMsg(){
	       uni.showModal({
	       	title:'注意！聊天记录删除不可恢复',
			content:'确定要删除此好友的聊天记录？',
			success:(res)=> {
				if(res.confirm){
					uni.removeStorageSync(`msg_${this.user.targetId}`)
					this.rightBtnShow=false
					this.$emit('reLoadmsgList',this.user.targetId)
					
				}
			}
	       })
		
		
		},
		
		
	}
};
</script>

<style lang="scss" scoped>
.custom-nav-bar {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	align-items: center;
	justify-content: space-between;
	height: 100rpx;
	padding-left: 15rpx;
	background-color: #f3f3f3;
	border-bottom: 1px solid #eee;
}

.nav-bar-left,
.nav-bar-right {
	margin-right: 30rpx;
	position: relative;
	background-color: #fff;
	
	width: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.rightBtn {
  width: 250rpx;
  height: 200rpx;
  border-radius: 20rpx;
  position: absolute;
  background-color: #4f4f4f;
  top: 130%;
  right: 10rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  z-index: 999;
  /* 给容器加一点顶部内边距，避免内容与三角形重叠 */
  padding-top: 15rpx;
}
.right-btn-mask{
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 100;
	background-color: transparent;
}
/* 核心：用伪元素实现三角形，定位在容器顶部 */
.rightBtn::before {
  content: '';
  position: absolute;
  top: -16rpx; /* 三角形上移，超出容器顶部 */
  right: 30rpx; /* 三角形靠右对齐（可调整位置） */
  /* 三角形尺寸：宽32rpx，高16rpx */
  width: 0;
  height: 0;
  /* 边框实现三角形（下边框为实色，其他边透明） */
  border-left: 16rpx solid transparent;
  border-right: 16rpx solid transparent;
  border-bottom: 16rpx solid #4f4f4f; /* 颜色与容器背景一致，形成连接感 */
  /* 给三角形也加轻微阴影，增强立体感 */
  filter: drop-shadow(0 -2rpx 2rpx rgba(0, 0, 0, 0.1));
}

/* 子按钮样式（保持之前的优化） */
.rightBtn .btn {
  text-align: center;
  color: #fff;
  padding: 15rpx 20rpx;
  margin-top: 10rpx;
  border-radius: 10rpx;
  transition: all 0.15s;
}

.rightBtn .btn:active {
  background-color: #2d2d2d;
  box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
  transform: scale(0.98);
}

.rightBtn:hover {
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.25);
  transform: translateY(-2rpx);
}
.user_pic {
	width: 60rpx;
	height: 60rpx;
}
.userimg {
	width: 60rpx;
	height: 60rpx;
}
.nav-bar-title {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	overflow: hidden;
		/* #ifndef APP-PLUS-NVUE */
		white-space: nowrap;
	/* #endif */
	text-overflow: ellipsis;
}
</style>
